<template>
  <div class="h-full flex flex-col bg-white">
    <!-- 标题栏 -->
    <div class="flex items-center justify-between px-4 py-2 border-b border-gray-100">
      <h3 class="text-sm font-medium text-gray-700">Goroutine 列表</h3>
      <div class="flex items-center gap-2">
        <el-select
          v-model="statusFilter"
          size="small"
          placeholder="筛选状态"
          clearable
          class="w-32"
          @change="handleFilterChange"
        >
          <el-option label="全部" value=""></el-option>
          <el-option label="运行中" value="running"></el-option>
          <el-option label="等待中" value="waiting"></el-option>
          <el-option label="系统调用" value="syscall"></el-option>
          <el-option label="空闲" value="idle"></el-option>
          <el-option label="已停止" value="stopped"></el-option>
          <el-option label="已结束" value="dead"></el-option>
        </el-select>
        <el-button
          type="text"
          icon="el-icon-refresh"
          size="small"
          class="!text-primary-500 hover:!text-primary-600"
          :loading="loading"
          @click="$emit('refresh')"
          title="刷新列表"
        >
          刷新
        </el-button>
      </div>
    </div>

    <!-- Goroutine 列表 -->
    <div class="flex-1 overflow-y-auto" v-loading="loading">
      <!-- 空状态 -->
      <div
        v-if="filteredGoroutines.length === 0 && !loading"
        class="flex flex-col items-center justify-center h-48 text-gray-400"
      >
        <i class="el-icon-cpu text-5xl mb-2 opacity-50"></i>
        <p class="text-sm my-1">暂无 Goroutine</p>
        <p class="text-xs my-1 opacity-70">请在调试暂停时查看</p>
      </div>

      <!-- Goroutine 项列表 -->
      <div v-else class="py-1">
        <div
          v-for="g in filteredGoroutines"
          :key="g.id"
          class="px-4 py-2.5 border-b border-gray-50 hover:bg-blue-50 transition-all cursor-pointer relative"
          :class="{
            'bg-blue-50 border-l-4 border-l-blue-500 !pl-3': selectedGoroutineId === g.id,
            'hover:border-l-2 hover:border-l-blue-300': selectedGoroutineId !== g.id
          }"
          @click="handleSelect(g)"
        >
          <div class="flex items-start justify-between mb-1">
            <div class="flex items-center gap-2">
              <i v-if="selectedGoroutineId === g.id" class="el-icon-check text-blue-500 text-sm"></i>
              <span class="text-sm font-mono font-medium" :class="selectedGoroutineId === g.id ? 'text-blue-600' : 'text-gray-700'">
                G{{ g.id }}
              </span>
              <el-tag
                :type="getStatusTagType(g.status)"
                size="mini"
                effect="plain"
              >
                {{ getStatusText(g.status) }}
              </el-tag>
              <span
                v-if="g.waitReason"
                class="text-xs text-gray-500"
                :title="`等待原因: ${g.waitReason}`"
              >
                <i class="el-icon-time"></i> {{ g.waitReason }}
              </span>
            </div>
            <span class="text-xs text-gray-400">
              Thread: {{ g.threadID || 'N/A' }}
            </span>
          </div>

          <!-- 当前位置 -->
          <div class="text-xs mb-1">
            <span class="text-gray-500">当前位置:</span>
            <span class="text-blue-600 font-mono ml-1">
              {{ formatLocation(g.currentLoc) }}
            </span>
          </div>

          <!-- 入口函数 -->
          <div class="text-xs">
            <span class="text-gray-500">入口函数:</span>
            <span class="text-teal-600 font-mono ml-1">
              {{ g.startLoc.function || 'unknown' }}
            </span>
          </div>

          <!-- 创建位置 -->
          <div v-if="g.goStatementLoc.function !== 'unknown'" class="text-xs text-gray-400 mt-1">
            <span class="text-gray-500">创建于:</span>
            <span class="font-mono ml-1">
              {{ formatLocation(g.goStatementLoc) }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部统计栏 -->
    <div class="px-4 py-2 border-t border-gray-200 bg-gray-50">
      <div class="flex items-center justify-between text-xs text-gray-600">
        <span>
          总计: <strong>{{ goroutines.length }}</strong> 个 Goroutine
        </span>
        <span v-if="statusFilter">
          筛选后: <strong>{{ filteredGoroutines.length }}</strong> 个
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GoroutinePanel',
  props: {
    goroutines: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    selectedGoroutineId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      statusFilter: ''
    }
  },
  computed: {
    filteredGoroutines() {
      if (!this.statusFilter) {
        return this.goroutines
      }
      return this.goroutines.filter(g => g.status === this.statusFilter)
    }
  },
  methods: {
    handleSelect(goroutine) {
      this.$emit('select', goroutine)
    },

    handleFilterChange() {
      // 筛选变化时可以做一些处理
    },

    getStatusText(status) {
      const statusMap = {
        'running': '运行中',
        'waiting': '等待中',
        'syscall': '系统调用',
        'idle': '空闲',
        'stopped': '已停止',
        'dead': '已结束',
        'cgo': 'CGO调用',
        'unknown': '未知'
      }
      return statusMap[status] || status
    },

    getStatusTagType(status) {
      const typeMap = {
        'running': 'success',
        'waiting': 'warning',
        'syscall': 'info',
        'idle': '',
        'stopped': 'info',
        'dead': 'info',
        'cgo': 'info',
        'unknown': ''
      }
      return typeMap[status] || ''
    },

    formatLocation(loc) {
      if (!loc || !loc.file || loc.file === 'unknown') {
        return 'unknown'
      }

      const fileName = this.extractFileName(loc.file)
      const funcName = loc.function || 'unknown'

      return `${funcName} @ ${fileName}:${loc.line}`
    },

    extractFileName(filePath) {
      if (!filePath) return ''
      const parts = filePath.split(/[/\\]/)
      return parts[parts.length - 1]
    }
  }
}
</script>

<style scoped>
/* 使用 Tailwind CSS 代替大部分样式 */
</style>
